<template>
</template>
<script setup>
import { onMounted, inject, onUnmounted, ref } from "vue";
let map, scene;
const layers = ref(null);

onMounted(() => {
    map = inject("$scene_map").map;
    scene = inject("$scene_map").scene;
    
    // 优化初始视图加载
    map.on('load', () => {
        // 设置渐进式加载
        map.setLayoutProperty('building', 'visibility', 'none');
        map.setLayoutProperty('road', 'visibility', 'none');
        
        // 设置初始视图
        map.flyTo({
            center: [114.3, 30.5],
            zoom: 14,
            pitch: 70,
            duration: 2000, // 增加动画时间，使过渡更平滑
            essential: true
        });

        // 延迟加载图层
        setTimeout(() => {
            map.setLayoutProperty('building', 'visibility', 'visible');
            map.setLayoutProperty('road', 'visibility', 'visible');
        }, 1000);
    });

    // 优化地图交互
    map.on('zoom', () => {
        const zoom = map.getZoom();
        // 根据缩放级别调整图层细节
        if (zoom < 12) {
            map.setLayoutProperty('building', 'visibility', 'none');
        } else {
            map.setLayoutProperty('building', 'visibility', 'visible');
        }
    });
});

onUnmounted(() => {
    // 清理资源
    if (layers.value) {
        Object.values(layers.value).forEach(layer => {
            if (layer) {
                scene.removeLayer(layer);
            }
        });
    }
    scene.getLayers()[0].show();
});
</script>
<style>

</style>
